<template>
<div class="apply">
    <my-header></my-header>
    <div class="whole">
        <div class="container">
            <h2>
                选择会员卡类型
            </h2>
            <div class="bottom4">
             <div class="list1">
                <div class="top1">
                    <a href="">
                        <img src="http://www.yhachina.com/data/images/2016-05-05/572b2e449ef55.jpg" alt="">
                    </a>
                </div>
                <div class="explain">
                    <h3>国际青年旅舍<font>®</font>会员卡</h3>
                        <span>￥50</span>
                    <p>全球通用，可以享受国内外国际青年旅舍<font>®</font>住宿价格的优惠，同时在世界各地享有逾三千项的优惠。</p>
                    <a href="">了解更多</a>
                </div>
                <router-link to="/immediately" href="">马上申请</router-link>
            </div>
            <div class="list2">
                <div class="top2">
                    <a href="">
                        <img src="http://www.yhachina.com/data/images/2016-05-05/572b2e6779b75.jpg" alt="">
                    </a>
                </div>
                <div class="explain1">
                    <h3>国际青年旅舍<font>®</font>终身会员卡</h3>
                        <span>￥500</span>
                    <p>全球通用，终身有效，适合身为青年旅舍<font>®</font>忠实粉丝的你。</p>
                    <a href="">了解更多</a>
                </div>
                <router-link to="/immediately2" href="">马上申请</router-link>
            </div>
        </div> 
        </div>
    </div>
    <my-footer></my-footer>
</div>
    
</template>

<script>
import MyFooter from '@/components/MyFooter.vue'
import MyHeader from '@/components/MyHeader.vue'
    export default {
  components: { MyHeader,MyFooter },
        
    }
</script>

<style lang="scss" scoped>
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.whole{
    background-color: #f5f5f5;
    color: #333;
    padding: 50px 0 100px;
    >.container{
        background-color: #fff;
        border: 1px solid #e1e1e1;
        border-radius: 10px;
        width: 1080px;
        height: 580px;
        margin: 0 auto;
        padding: 20px;
        >h2{
            font-size: 18px;
            font-weight: bold;
            border-bottom: 1px solid #e2e2e2;
            padding-bottom: 7px;
        }
        >.bottom4{
            margin: 50px -135px 0 0;
            //text-align: left;
            display: flex;
            justify-content: left;
            >.list1{
                width: 270px;
                text-align: center;
                margin: 0 115px 0 10px;
                >img{
                    width: 270px;
                    height: 175px;
                    display: block;
                }
                >.explain{
                height: 170px;
                >h3{
                    font-size: 20px;
                    font-weight: bold;
                    margin: 25px 0 15px;
                    >font{
								vertical-align: super;
								font-size: 50%;

							}
                }
                    >span{
                      color: #f7941c;
                      font-size: 20px;
                      font-weight: bold;
                      padding-top: 20px; 
                    }
                   
            >p{
                width: 210px;
                font-size: 14px;
                color: #666;
                height: 105px;
                margin: 0 auto;
                padding-top: 20px;
                line-height: 21px;
                >font{
								vertical-align: super;
								font-size: 50%;

							}
            }
            >a{
                color: #4b8fcc;
                text-decoration: underline;
                display: block;
                width: 100%;
                bottom: 0;
                padding-top: -20px;
            }
            }
            >a{
                display: block;
                width: 180px;
                height: 40px;
                line-height: 40px;
                text-align: center;
                font-size: 16px;
                font-weight: bold;
                color: #fff;
                background-color: #f7941c;
                margin: 40px auto 30px;
                text-decoration: none;
                border-radius: 20px;
                margin-top: 50px;
            }
            }


            >.list2{
            width: 270px;
            text-align: center;
            margin: 0 115px 0 10px;
            >img{
                    width: 270px;
                    height: 175px;
                    display: block;
                }
                >.explain1{
                height: 170px;
                >h3{
                    font-size: 20px;
                    font-weight: bold;
                    margin: 25px 0 15px;
                    >font{
								vertical-align: super;
								font-size: 50%;
							}
                }
            >span{
                      color: #f7941c;
                      font-size: 20px;
                      font-weight: bold;
                      padding-top: 20px; 
                    }
                   
            >p{
                width: 210px;
                font-size: 14px;
                color: #666;
                height: 105px;
                margin: 0 auto;
                padding-top: 20px;
                line-height: 21px;
                >font{
								vertical-align: super;
								font-size: 50%;

							}
            }
            >a{
                color: #4b8fcc;
                text-decoration: underline;
                display: block;
                width: 100%;
                bottom: 0;
                padding-top: -20px;
            }
            }
            >a{
                display: block;
                width: 180px;
                height: 40px;
                line-height: 40px;
                text-align: center;
                font-size: 16px;
                font-weight: bold;
                color: #fff;
                background-color: #f7941c;
                margin: 40px auto 30px;
                text-decoration: none;
                border-radius: 20px;
                margin-top: 50px;
            }
            
            }
        }
        }
    }
</style>